iT邦幫忙

2023 iThome 鐵人賽

DAY 19
1

如我們昨天所介紹的,以支援程度的角度來看,COLR/CPAL 規格的彩色字型可以獲得最廣的相容性;而除了顯示之外,也可以透過 CSS 的調整,對其顏色進行讀取和覆寫的操作。

檢查瀏覽器相容性

雖然 SBIXCBDT/CBLCOpenType-SVGCOLR/CPAL 都是 OpenType 定義的彩色字型規格,但各個排版引擎與瀏覽器對他們的支援都不一樣,我們可以打開 Chromacheck 這個網頁來檢查瀏覽器對彩色字型的相容性。

以最常見的桌面版 Chrome 而言,應該除了 OpenType-SVG 之外,其他都是綠色的。不過,如果你是使用 Safari,或是 iPhone 和 iPad 上的任何瀏覽器(包含 Safari 和第三方瀏覽器——畢竟他們實際上都是 WebKit 引擎的套皮),則會顯示不支援 COLRv1CBDT/CBLC 格式。

不難發現,其實 COLR/CPAL v0 的泛用性是最高的。

Rocher Color

在這裡,我們以 David Jonathan Ross 設計的 Rocher Color 這套字型為例。

藉由 Wakamai Fond 這個網站的分析,我們可以知道 Rocher Color 是一套擁有兩個可變軸、11 個基本色版、每種色盤擁有四個顏色的 COLR/CPAL v0 字型(This font has COLR color glyphs. Your browser supports this format. It has 11 color palettes of 4 colors.

設定基本色盤

那麼,使用者要怎麼使用這 11 個基本色盤呢?我們可以透過 css 的 @font-palette-values 規則去指定,例如預設的色盤就是:

.class {
  font-palette: --Default;
}

@font-palette-values --Default {
  font-family: Rocher;
  base-palette: 0;
}

如果要選第一個色版(粉紅配色)的話:

.class {
  font-palette: --Pink;
}

@font-palette-values --Pink {
  font-family: Rocher;
  base-palette: 1;
}

覆寫色盤 Override

若是設計師配好的基本色版裡面都沒有喜歡的樣子呢?我們可以透過 override-colors 的方法強制覆寫某個圖層的顏色,如果要覆寫「第一個色版裡的第二組顏色」,將其設為白色(#FFFFFF)的話,可以透過:

.class {
  font-palette: --PinkPartOverride;
}

@font-palette-values --PinkPartOverride {
  font-family: Rocher;
  base-palette: 1;
  override-colors: 2 #FFFFFF;
}

萬一完全都想換掉?透過類似的方法,可以完全的覆寫顏色,此時要選哪一個當基本色版就都沒關係了,反正顏色都會被換掉:

.class {
  font-palette: --OverrideAll;
}


@font-palette-values --OverrideAll {
  font-family: Rocher;
  override-colors:
    0 #2C4251,
    1 #D16666,
    2 #B6C649,
    3 #1CAD70;
}

對 COLR/CPAL 規格的彩色字體而言,字符不一定得全部套用同一種顏色,反而可以在設計時透過圖層設色的概念,為使用者帶來了分層上色的可能,獲得更加璀璨繽紛的色彩。

》Today's demo code: https://codepen.io/chingru/pen/abPaGMw


上一篇
DAY 18|OpenType Color Font:宗教組織
下一篇
DAY 20|Emoji:可愛的小東西
系列文
一起成為新世紀文字藝術師:深入玩轉 Unicode 和 OpenType30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言